import { createRouter, createWebHistory } from 'vue-router'

import { ElMessage } from "element-plus"

// import NProgress from "nprogress"
// import 'nprogress/nprogress.css' //这个样式必须引入
// console.log("NProgress",NProgress);


import routes from "./routes"
import store from "@/store/index"

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
})

/* 
  全局前置守卫  => 页面中所有的导航跳转都可以进行控制 

  router.beforeEach(function(to,from,next){ // 路由中间件函数 => 每次路由跳转,都会依次进过每一个路由中间件函数
        to  路由信息(对象) => 即将跳转的页面的路由信息
        from  当前路由信息 => 跳转前的页面的路由信息

        //  老版本
        next()  1. 允许进入下一个路由中间件函数(如果后续还存在路由中间件函数)   2. 运行访问页面(后面没有路由中间件函数)
        next(false)  不允许访问页面 (页面不会跳转)
        next("/login")  重定向
        next({path,name,query,paramse})   重定向

        // 新版本
        next()   =>   return true;  
        next(false)   => return false

        next("/login")    =>   return "/login"
        next({path,name,query,paramse})    return {path,name,query,paramse};
        
  })


  动态路由
  router.addRoute(RouteOption)  => 添加路由配置对象
  router.addRoute(name, RouteOption)  => 为某个路由添加子路由


  router.getRoutes()    => 获取所有路由信息
  router.hasRoute(name)    => 判断是否存在某个路由信息
  router.removeRoute(name)    => 对应路由名称删除路由


*/


/* 

console.log("路由实例",router);
console.log("获取所有路由信息1",router.getRoutes());


// 直接放路由数组中  => 一级视图
// router.addRoute({
//   path:"/demo",
//   name:"demo",
//   component: ()=> import("@/views/Home/Layout/index.vue"),
// })

//  对应路由名称放置  => 作为该路由的子路由
router.addRoute("home",{
  path:"/demo",
  name:"demo",
  component: ()=> import("@/views/Home/Layout/index.vue"),
})


router.removeRoute("demo");

console.log("获取所有路由信息2",router.getRoutes());
console.log("是否存在demo",router.hasRoute("demo")); */



/* 
  需求: 每次页面刷新, 在全局路由守卫中进行数据持久化 => 将本地数据同步到vuex中

*/

let count = 0;  // 变量 =>1. 计数  2. 每次页面刷新,count也会重置为0
let whiteList = ["/login", "/404"]

router.beforeEach((to, from, next) => {

  if (!whiteList.includes(to.path)) {
    // console.log("count", store);
    if (count == 0) {
      // console.log("同步本地数据到vuex");
      store.commit("getAuthorityFromLocal");
      store.dispatch("getAuthMenu");  // 获取权限菜单
      store.dispatch("addDynamicRoute");  // 添加动态路由
      count++;

      // return {...to,replace:true}; //解决动态路由添加后  页面白屏的问题 (动态路由添加之后,重新跳转当前页)
      next({ ...to, replace: true })   // replace => router.repalce()  覆盖之前历史记录
    } else {
      next()
    }

    // NProgress.start();
  } else {
    next();
  }


})

router.beforeEach(function (to, from) { // 路由中间件函数 => 每次路由跳转,都会依次进过每一个路由中间件函数
  console.log("路由中间件函数1:from", from);
  console.log("路由中间件函数1:to", to);

  

  // 先登录(存储数据到vuex),在跳转主页  可以访问 => store.getters.isLogin

  // console.log("store123123",store.getters.isLogin);  // 刷新会有问题  => 刷新时先走全局路由守卫,之后进入主页面 (我们在主页面挂载前,进行本地数据同步vuex )   =>  问题: 刷新页面,全局路由守卫中无法store.getters.isLogin => 有解决
  if (to.meta?.requireAuth) {
    if (store.getters.isLogin) { // 已经登录 => 就跳转
      // return true;


      // 前端权限限制  
      // 是否有权限访问页面  => 有就跳转, 没有就拒绝
      // console.log("角色信息", store.getters.role);
      // if (to.meta.role.includes(store.getters.role)) {
      //   return true;
      // } else {
      //   ElMessage({
      //     type: "error",
      //     message: "暂无权限!",
      //   })
      //   return false;  // next(false)
      // }
      return true;

    } else { // 没有登录 => 去登录,登录成功,在回去
      next({ path: "/login", query: { ReturnUrl: to.fullPath } })
    }


  } else {
    return true;
  }
  // return true;
})



router.afterEach((to,from)=>{
  // NProgress.done();
})




export default router
